<template>
  <view class="wrapper">
    <view class="item" v-for="(item, index) in list" :key="index">
      <view class="time">
        <view class="text">订单号: {{ item.sn }}</view>
        <view class="text" v-if="true">{{ item.create_time }}</view>
      </view>
      <view class="product" v-for="(o, i) in item.item" :key="i">
        <template v-if="o.product">
          <view class="image">
            <u--image
                class="img"
                lazy-load width="160rpx"
                height="160rpx"
                :fade="true" duration="450"
                :src="baseUrl + o.sku.image.thumbnail_path"
                v-if="o.sku && o.sku.image"></u--image>
            <u--image
                class="img"
                lazy-load width="160rpx"
                height="160rpx"
                :fade="true" duration="450"
                :src="baseUrl + o.product.mainImage.thumbnail_path"
                v-else-if="o.product.mainImage"></u--image>
          </view>
          <view class="desc">
            <view class="title two-lines">{{ o.product.title }}</view>
            <view class="sku" v-if="o.selected_sku_text && Array.isArray(o.selected_sku_text)">
              {{ o.selected_sku_text.join(', ') }}
              x
              {{ o.quantity }}
            </view>
            <view class="price">
              价格: <text class="unit">￥</text><text>{{ o.price * 1 }}</text>
              <template v-if="o.freight > 0">
                <text class="split"></text>
                运费: <text class="unit">￥</text><text>{{ o.freight * 1 }}</text>
              </template>
            </view>
            <view class="price">
              数量: <text> {{ o.quantity * 1 }}</text>
            </view>
            <view class="price">
              总金额: <text class="red"> {{ item.total_pay * 1 }}</text>
            </view>
          </view>
        </template>
      </view>
      <view class="status">
        <!-- 订单状态 -->
        <view class="text">{{ item | statusText }}</view>
      </view>
      <!--<view class="ops">-->
      <!--  <view class="amount" v-if="item.status * 1 !== 0">实付金额:<text class="unit">￥</text><text>{{ item.total_pay * 1 }}</text></view>-->
      <!--  <view class="btn">-->
      <!--    <view class="x" v-if="item.status * 1 === 0">-->
      <!--      <u-button class="" text="取消" size="small" @click="onCancel(item)"></u-button>-->
      <!--    </view>-->
      <!--    <view class="x" v-if="item.status * 1 === 0 && false">-->
      <!--      <u-button class="" text="去支付" size="small"></u-button>-->
      <!--    </view>-->
      <!--    <view class="x" v-if="item.status * 1 === 2" @click="onReceived(item)">-->
      <!--      <u-button class="" text="确认收货" size="small"></u-button>-->
      <!--    </view>-->
      <!--    <view class="x" v-if="item.status * 1 === 3">-->
      <!--      <u-button class="" text="评价" size="small" @click="onComment"></u-button>-->
      <!--    </view>-->
      <!--    <view class="x" v-if="item.status * 1 === 3">-->
      <!--      <u-button class="" text="申请售后" size="small" @click="onService"></u-button>-->
      <!--    </view>-->
      <!--    <view class="x" v-if="item.status * 1 === 1" @click="onUrge">-->
      <!--      <u-button class="" text="催发货" size="small"></u-button>-->
      <!--    </view>-->
      <!--    <view class="x" v-if="item.is_group * 1 === 1" @click="onGroup(item)">-->
      <!--      <u-button class="" text="拼团详情" size="small" type="primary"></u-button>-->
      <!--    </view>-->
      <!--  </view>-->
      <!--</view>-->
      <view class="address" v-if="item.address && item.address.city">
        <view>收件人: {{item.address.nickname}}</view>
        <view>收件电话: {{item.address.mobile}}</view>
        <view>收货地址: {{item.address.city.province}} {{item.address.city.city}} {{item.address.city.area}} {{item.address.address}}</view>
      </view>
      <view class="express" v-if="item.status * 1 === 2" @click="onExpress(item)">
        查看物流信息...
      </view>
    </view>
  </view>
</template>

<script>
import Arrow from '../../components/arrow'
import base64 from '../../util/base64'
import Order from '../../api/order'
import config from '../../config/config'
const orderModel = new Order()
export default {
  components: {
    Arrow
  },
  filters: {
    statusText(v) {
      console.log(v)
      if (v.is_group && v.is_win == 0) {
        // if (v.status == 1) {
        //   return '待完成'
        // }
        return '不用发货'
      }
      switch (+v.status) {
        case 0:
          return '待支付'
        case 1:
          return '待发货'
        case 2:
          return '待收货'
        case 3:
          return '待评价'
        case 4:
          return '售后中'
        case 5:
          return '已取消'
        case 6:
          return '已退款'
        case 10:
          return '已完成'
      }
    },
    groupStatus(v) {
      switch (+v) {
        case 0:
          return '待支付'
        case 1:
          return '拼团中'
        case 2:
          return '拼团已完成'
      }
    }
  },
  data() {
    return {
      baseUrl: config.baseUrl,
      id: 0,
      // order: {},
      list: []
    }
  },
  onLoad(options) {
    this.id = options.id || 0
    this.fetch()
  },
  methods: {
    fetch() {
      orderModel.detail({ id: this.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        console.log(data)
        this.list.push(data)
      })
    },
    // 查看物流
    onExpress(item) {
      // console.log(item)
      if (item.item && item.item.length > 0 && item.item[0].logistics) {
        const id = item.item[0].logistics.id
        // console.log(id)
        uni.navigateTo({
          url: `/sub_service/order/express?id=${id}`
        })
      } else {
        uni.showToast({
          icon: 'none',
          title: '暂无物流信息',
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrapper {
  font-size: 24rpx;
  padding: 20rpx;
  background: $background_color;
  .item {
    background: white;
    padding: 20rpx;
    border-radius: 10rpx;
    margin-bottom: 10px;
    min-height: calc(100vh - 60rpx);
    box-sizing: border-box;
    .status {
      //background: red;
      padding: 20rpx 0;
      .text, .group, .win {
        display: inline-block;
        background: $main_color;
        padding: 5rpx 10rpx;
        color: white;
        margin-right: 10px;
      }
      .group {
        background: red;
        &.done {
          background: #f3f5f7;
          color: #000000;
        }
      }
      .win {
        background: red;
        &.not {
          background: #f3f5f7;
          color: #000000;
        }
      }
    }
    .time {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #f5f7f9;
      color: #ccc;
      font-size: 24rpx;
      &.text {
        font-size: 24rpx !important;
      }
    }
    .product {
      display: flex;
      margin-top: 10px;
      .image {
        width: 160rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        .img {
          display: block;
        }
      }
      .desc {
        flex: 1;
        padding-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        .title, .sku, .price {
          height: 20px;
        }
        .title {
          font-weight: 700;
          font-size: 26rpx;
        }
        .sku {
          color: #999;
        }
        .price {
          .red {
            color: red;
            margin-left: 10rpx;
          }
          text {
            font-weight: 500;
            //font-size: 26rpx;
          }
          .unit {
            font-size: 20rpx;
            margin-left: 10rpx;
          }
          .split {
            //background: red;
            //height: 20px;
            width: 10px;
            display: inline-block;
          }
        }
      }
    }
    .ops {
      height: 50px;
      //background: red;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .amount {
        width: 300rpx;
        text {
          font-weight: 700;
          font-size: 32rpx;
          color: red;
        }
        .unit {
          font-size: 20rpx;
          margin-left: 10rpx;
        }
      }
      .btn {
        flex: 1;
        display: flex;
        //background: red;
        justify-content: flex-end;
        //justify-content: space-between;
        .x {
          letter-spacing: 1px;
          margin-left: 5px;
        }
      }
    }
    .express {
      background: #f1f2f3;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #999;
      border-radius: 10rpx;
      font-size: 20rpx;
      letter-spacing: 1px;
    }
  }
}
</style>
